<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{border: 1px solid #333;}
	</style>
</head>
<body>
	<!-- canvas的宽度和高度，不能用css来调整，用属性来调整宽度和高度 -->
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		//拿到一张白纸
		let canvas=document.querySelector("canvas");
		
		//拿画笔
		let ctx= canvas.getContext("2d")
		let x=0,y=0;
		let yDirection=true;		//true 向下；false 向上
		let xDirection=true;		//true 向右；false 向左

		//矩形开始位置
		ctx.fillStyle="red";
		ctx.fillRect(x,y,100,100)


		setInterval(()=>{

			ctx.clearRect(x,y,100,100)	
			//如果x大于500，则调整xDirection为false
			if(x>=500){
				xDirection=false
			}

			if(x<=0){
				xDirection=true;
			}

			//xDirection为true的时候，向右运动；为false，则向左运动
			if(xDirection){
				x++
			}else{
				x--
			}
			


			//用临界点，来调整yDirection
			if(y>=300){
				yDirection=false
			}

			if(y<=0){
				yDirection=true;
			}

			//用yDirection来控制方向
			if(yDirection){
				y++
			}else{
				y--
			}

			ctx.fillRect(x,y,100,100)
		},10)
	
	</script>
</body>
</html>